<template>
  <view class="charge-index">
    <view class="background">
      <view class="headline">
        <text class="text1">电子卡充值享优惠</text>
        <text class="text2">会员日充值更优惠</text>
      </view>
    </view>
    <view class="content">
      <view class="title">我的卡片 ({{ cardList.length }})</view>
      <view class="title"></view>
      <view v-for="item in cardList" :key="item.id" :class="[cardOilsTypeClass[item.cardOilsType]]">
        <view class="title">
          {{ cardOilsTypeText[item.cardOilsType] }}
        </view>
        <view class="text">
          余额 <text>{{ item.amt.toFixed(2) }}</text>元
        </view>
        <button @click="goCharge(item)">充值</button>
      </view>
    </view>

    <van-popup :show="mask" closeable position="bottom" class="mask" round @close="mask = false">
      <view class="charge">
        <view class="title">充值</view>
        <view class="tip">会员日充值更优惠，详情请咨询站长</view>
        <view class="minAmt" v-if="cardOilsTypeText[chargeItem.cardOilsType] === '汽油卡'">最低充值金额{{ gasolineMinAmt }}</view>
        <view class="minAmt" v-if="cardOilsTypeText[chargeItem.cardOilsType] === '柴油卡'">最低充值金额{{ dieselMinAmt }}</view>
        <view class="minAmt" v-if="cardOilsTypeText[chargeItem.cardOilsType] === 'LNG卡'">最低充值金额{{ LNGMinAmt }}</view>
        <view class="minAmt" v-if="cardOilsTypeText[chargeItem.cardOilsType] === 'CNG卡'">最低充值金额{{ CNGMinAmt }}</view>
        <view class="amount">
          <text>{{ cardOilsTypeText[chargeItem.cardOilsType] }}</text>
          <input placeholder="输入充值金额" v-model="chargeAmount" type="number" step="0.01" min="0" />
          <text>￥</text>
        </view>
        <view class="container">
          <view class="btn" v-for="item in discountList" :key="item.cardSettingDetailId"
            @click="selectDiscount(item.discountAmtStart)">
            <text>￥</text>
            <text>{{ item.discountAmtStart }}</text>
            <text>满{{ item.discountAmtStart }}送{{ item.presentAmt
            }}{{ item.settingRuleType == "1" ? "元" : "%" }}</text>
          </view>
        </view>
      </view>
      <van-button :class="[chargeAmount !== '' ? 'selected' : '']" :loading="payLoading" loading-text="支付中..."
        @click="charge" :disabled="chargeAmount === ''">
        确认充值
      </van-button>
    </van-popup>
    <van-action-sheet :show="stataionShow" :actions="stationActions" @select="onStationSelect" close-on-click-action
      cancel-text="取消" @cancel="stataionShow=false" />
  </view>

</template>

<script>

export default {
  head() {
    return {
      title: "会员充值",
    };
  },
  data() {
    return {
      mask: false,
      cardList: [],
      chargeItem: {},
      chargeAmount: "",
      stationInfo: {},
      payLoading: false,
      show: false,
      discountList: [],
      cardOilsTypeClass: [, "gasoline", "diesel", "lng", "cng"],
      cardOilsTypeText: [, "汽油卡", "柴油卡", "LNG卡", "CNG卡"],
      tempEnterpriseId: undefined,
      a: undefined,
      b: undefined,
      c: undefined,
      d: undefined,
      e: undefined,
      stataionShow: false,
      stationActions: [],
      selectedStation: {},
      gasolineMinAmt: 0,
      dieselMinAmt: 0,
      LNGMinAmt: 0,
      CNGMinAmt: 0,
    };
  },
  computed: {

  },
  created() {
    this.tempEnterpriseId = this.enterpriseId;
    setTimeout(() => {
      if (!this.tempEnterpriseId) {
        alert("此页面不支持直接访问");
        return;
      }
      this.init();

    }, 500)


  },
  methods: {

    onStationSelect(q) {
      this.selectedStation = q.detail;
      this.mask = !this.mask;
      this.stataionShow = false;
    },
    switchMask() {
      this.mask = !this.mask;
    },
    async getDiscount() {
      this.discountList = [];
      try {
        // 拉取折扣
        const res = await this.$Request({
          url: "/getCardRechargeSettingList",
          method: "GET",
          data: {
            enterpriseId: this.enterpriseId,
            cardOilsType: this.chargeItem.cardOilsType,
          }
        });
        if (res.retCode === 0) {
          if (!!res.data) {
            this.discountList = res.data[0].customerCardSettingDetailList;
          }
        }
        // 拉取最低充值金额
        const res1 = await this.$Request({
          url: "/getCardRechargeMinAmt",
          method: "GET",
          data: {
            enterpriseId: this.enterpriseId,
          }
        });

        if (res1.retCode === 0) {
            this.gasolineMinAmt = res1.data[0].gasolineMinAmt;
            this.dieselMinAmt = res1.data[0].dieselMinAmt;
            this.LNGMinAmt = res1.data[0].LNGMinAmt;
            this.CNGMinAmt = res1.data[0].CNGMinAmt;
          }
      } catch (error) {
      }
    },

    goCharge(ele) {
      if (this.stationActions.length == 1) {
        this.selectedStation = this.stationActions[0];
        this.mask = !this.mask;
      } else {
        this.stataionShow = true;
      }
      this.chargeItem = ele;
      this.getDiscount();
    },
    charge() {
      this.chargeAmount = this.chargeAmount.toString().replace(/\.$/g, "");
      this.pay();
    },
    async init() {
      try {
        const res = await this.$Request({
          url: "/selectStaInfoList",
          method: "GET",
          data: {
            enterpriseId: this.enterpriseId,
          }
        });
        if (res.retCode === 0) {
          if (!!res.data) {
            this.stationActions = res.data.map((ele) => {
              return { ...ele, name: ele.stationName };
            });
          }
        }
        // 获取卡片
        const res1 = await this.$Request({
          url: "/getElectronicCardList",
          method: "GET",
          data: {
            enterpriseId: this.enterpriseId,
            mobilePhone: this.phoneNumber,
          }
        });

        if (res1.retCode === 0) {
          this.cardList = res1.data;
        }
      } catch (error) {
      }
    },
    showToastAndGoback(title) {
      uni.showToast({
        title,
        icon: "error",
      })
      this.payLoading = false;
    },
    async pay() {
      this.payLoading = true;
      try {
        const orderData = await this.$Request({
          url: "/rechargeBalance",
          method: "POST",
          data: {
            amt: this.chargeAmount,
            enterpriseId: this.tempEnterpriseId,
            // customerName: '',
            cardOilsType: this.chargeItem.cardOilsType,
            mobilePhone: this.phoneNumber,
            stationId: this.selectedStation.stationId,
          }
        });
        const orderNum = orderData.data;
        const payInfoData = await this.$Request({
          url: "/rechargeToThirdPayment",
          method: "POST",
          data: {
            amt: this.chargeAmount,
            openId: this.openId,
            enterpriseId: this.tempEnterpriseId,
            userType: "1",
            orderNo: orderNum,
            stationId: this.selectedStation.stationId
          }
        });
        const timeStamp = payInfoData.data.payTimeStamp;
        const nonceStr = payInfoData.data.paynonceStr;
        const payPackage = payInfoData.data.payPackage;
        const signType = payInfoData.data.paySignType;
        const paySign = payInfoData.data.paySign;

        const that = this;
        // 填写微信的信息，启动支付
        if (!timeStamp || !nonceStr || !payPackage || !signType || !paySign) {
          this.showToastAndGoback("参数不完整~");
          return
        }

        const [payErr, payData] = await uni.requestPayment({
          timeStamp: timeStamp,
          nonceStr: nonceStr,
          package: payPackage,
          signType: signType,
          paySign: paySign,
        })
        console.log(res, '....');
        if (!!payData && payData.errMsg === "requestPayment:ok") {
          uni.showToast({
            title: '支付成功',
            icon: 'success',
          });
          setTimeout(() => {
            that.init()
          }, 1000);
          return
        }
        if (payErr.errMsg === "requestPayment:fail cancel") {
          this.showToastAndGoback("取消了支付")
          return;
        }
        this.showToastAndGoback("支付失败")
      } catch (error) {
        this.showToastAndGoback(error);
      }
    },
    selectDiscount(discount) {
      this.chargeAmount = discount;
    },
  },
};
</script>

<style lang="scss">
.charge-index {
  position: relative;
  height: 100vh;
}

.charge-index .background {
  background-color: #f3b335;
  width: 750rpx;
  height: 750rpx;
  position: relative;
  background: url("../static/icon/23@2x.png") no-repeat 0px 0px;
  background-size: 100% 100%;
  z-index: -1;
  overflow: hidden;
}

.charge-index .background .headline {
  width: 690rpx;
  height: 433rpx;
  background: url("../static/icon/bj2@2x.png") no-repeat 0px 0px;
  background-size: 100% 100%;
  margin: 30rpx auto;
  display: relative;
}

.charge-index .background .headline .text1 {
  position: absolute;
  left: 80rpx;
  top: 160rpx;
  color: #8e9aae;
  font-size: 30rpx;
  font-weight: 600;
}

.charge-index .background .headline .text2 {
  position: absolute;
  left: 80rpx;
  top: 220rpx;
  color: #8e9aae;
  font-size: 30rpx;
  font-weight: 600;
}

.charge-index .content {
  position: absolute;
  top: 378rpx;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  border-radius: 30rpx 30rpx 0 0;
  padding: 30rpx;
  overflow: scroll;
}

.charge-index .content>view:not(.title) {
  width: 690rpx;
  height: 160rpx;
  margin-top: 30rpx;
  position: relative;
}

.charge-index .content .title {
  font-size: 35rpx;
  color: #333333;
  font-weight: 600;
}

.charge-index .content .gasoline {
  background: url("../static/icon/bj3@2x.png") no-repeat 0px 0px;
  background-size: 100% 100%;
}

.charge-index .content .diesel {
  background: url("../static/icon/bj4@2x.png") no-repeat 0px 0px;
  background-size: 100% 100%;
}

.charge-index .content .notoil {
  background: url("../static/icon/bj5.2x.png") no-repeat 0px 0px;
  background-size: 100% 100%;
}

.charge-index .content .lng {
  background: url("../static/icon/bj6.2x.png") no-repeat 0px 0px;
  background-size: 100% 100%;
}

.charge-index .content .cng {
  background: url("../static/icon/bj7.2x.png") no-repeat 0px 0px;
  background-size: 100% 100%;
}

.charge-index .content view .title {
  height: 45rpx;
  font-size: 32rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  line-height: 45rpx;
  position: absolute;
  top: 27rpx;
  left: 167rpx;
}

.charge-index .content view .text {
  height: 45rpx;
  font-size: 32rpx;
  font-weight: 500;
  line-height: 45rpx;
  position: absolute;
  top: 90rpx;
  left: 167rpx;
}

.charge-index .content .gasoline .text {
  color: #3db58f;
}

.charge-index .content .diesel .text {
  color: #ea8c7d;
}

.charge-index .content .notoil .text {
  color: #898d92;
}

.charge-index .content .lng .text {
  color: #dab899;
}

.charge-index .content .cng .text {
  color: #6977b1;
}

.charge-index .content view .text text {
  color: #fff;
}

.charge-index .content view button {
  border: none;
  background-color: transparent;
  outline: none;
  display: block;
  width: 140rpx;
  height: 60rpx;
  line-height: 60rpx;
  background: #ffffff;
  border-radius: 30rpx;
  position: absolute;
  top: 50rpx;
  right: 30rpx;
}

.charge-index .content .gasoline button {
  color: #24ac81;
}

.charge-index .content .diesel button {
  color: #e87d6d;
}

.charge-index .content .notoil button {
  color: #6d7278;
}

.charge-index .content .lng button {
  color: #d2a781;
}

.charge-index .content .cng button {
  color: #45579e;
}

.charge-index .mask .charge {
  height: 750rpx;
  background: #f2f2f2;
  border-radius: 42rpx 42rpx 0 0;
  box-sizing: border-box;
  padding: 30rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.charge-index .mask .charge>view:not(:nth-child(1)):not(.container) {
  margin-top: 20rpx;
}

.charge-index .mask .charge .title {
  width: 650rpx;
  height: 45rpx;
  font-size: 32rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #111111;
  line-height: 45rpx;
  text-align: center;
}

.charge-index .mask .charge .title .close {
  background: url("../static/icon/6_d05_close@2x.png") no-repeat 0px 0px;
  background-size: 100% 100%;
  width: 40rpx;
  height: 40rpx;
  float: right;
}

.charge-index .mask .charge .tip {
  height: 33rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #aaaaaa;
  line-height: 33rpx;
}

.charge-index .mask .charge .minAmt {
  height: 33rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #e87d6d;
  line-height: 33rpx;
}

.charge-index .mask .charge .amount {
  width: 690rpx;
  height: 120rpx;
  background: url("../static/icon/biankuang@2x.png") no-repeat 0px 0px;
  background-size: 100% 100%;
  position: relative;
}

.charge-index .mask .charge .amount text:nth-child(1) {
  height: 40rpx;
  font-size: 28rpx;
  font-weight: 600;
  color: #884e16;
  line-height: 40rpx;
  position: absolute;
  top: 40rpx;
  left: 51rpx;
}

.charge-index .mask .charge .amount input {
  background: none;
  outline: none;
  border: none;
  height: 40rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #111111;
  line-height: 40rpx;
  position: absolute;
  top: 40rpx;
  left: 254rpx;
}

.charge-index .mask .charge .amount text:nth-last-child(1) {
  height: 40rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #aaaaaa;
  line-height: 40rpx;
  position: absolute;
  top: 40rpx;
  right: 40rpx;
}

.charge-index .mask button {
  border: none;
  outline: none;
  bottom: 70rpx;
  position: absolute;
  width: 690rpx;
  height: 80rpx;
  left: 30rpx;
  background: #cccccc;
  border-radius: 45rpx;
  font-size: 32rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 45rpx;
}

.charge-index .mask .selected button {
  background-color: #0ea374;
}

.charge-index .mask .container {
  margin-top: 40rpx;
  display: flex;
  flex-wrap: wrap;
  padding: 30rpx 30rpx;
  justify-content: space-between;
  overflow: scroll;
  height: 200rpx;
}

.charge-index .mask .container .btn {
  display: inline-block;
  width: 330rpx;
  height: 84rpx;
  background: #ffffff;
  box-shadow: 0 4rpx 8rpx 0 #f2f2f2;
  border-radius: 42rpx;
  margin-bottom: 35rpx;
  position: relative;
  box-sizing: border-box;
  padding: 0 26rpx;
  text-align: center;
}

.charge-index .mask .container .btn:nth-child(odd) {
  margin-right: 20rpx;
}

.charge-index .mask .container .btn text {
  font-size: 30rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  color: #895017;
  line-height: 84rpx;
}

.charge-index .mask .container .btn text:nth-child(1) {
  border-radius: 42rpx;
  font-size: 15rpx;
  float: left;
}

.charge-index .mask .container .btn text:nth-child(2) {
  float: left;
  font-weight: 600;
}

.charge-index .mask .container .btn text:nth-child(3) {
  font-size: 15rpx;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.29);
  float: right;
}</style>